<template>
  <editor-layout class="view-data"  v-on="$listeners" :showOkBtn="false" >
    <vue-json-editor
      class="full-jsonview"
      v-model="json"
      :show-btns="false"
      :mode="'code'"
      lang="zh"
    />
  </editor-layout>
</template>

<script>

import vueJsonEditor from 'vue-json-editor'

export default {
  name: 'view-data',
  components: {
    vueJsonEditor
  },
  props: {
    data: [String]
  },
  data() {
    return {
      json: this.getJson()
    }
  },
  methods: {
    getJson() {
      let rtn = []
      try {
        rtn = JSON.parse(this.data)
      }catch (e) {
        rtn = []
      }
      return rtn
    }
  },
  computed: {
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.view-data {

  .full-jsonview {
    height: 100%;

    /deep/
      .jsoneditor-vue {
        height: 100%;
      }
  }
}
</style>
